<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>MapLibre + deck.gl 集成示例</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/deck.gl@8.9.33/dist.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div class="legend">
        <h3>人口密度</h3>
        <div>
            <div style="display: inline-block; width: 12px; height: 12px; background: rgba(255, 0, 0, 0.8);"></div> 高
        </div>
        <div>
            <div style="display: inline-block; width: 12px; height: 12px; background: rgba(255, 255, 0, 0.8);"></div> 中
        </div>
        <div>
            <div style="display: inline-block; width: 12px; height: 12px; background: rgba(0, 255, 0, 0.8);"></div> 低
        </div>
    </div>

    <script type="module">
        // 天地图API密钥（替换为你自己的）
        const TIANDITU_KEY = "24f053f3d41f3e2df373d25ed9d8fef7";

        // 初始化MapLibre地图
        const map = new maplibregl.Map({
            container: 'map',
            style: {
                version: 8,
                name: '天地图影像',
                sources: {
                    'tdt-img': {
                        type: 'raster',
                        tiles: [
                            `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t2.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t4.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t5.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t6.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t7.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`
                        ],
                        tileSize: 256
                    },
                    'tdt-cia': {
                        type: 'raster',
                        tiles: [
                            `https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t2.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t3.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t4.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t5.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t6.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`,
                            `https://t7.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIANDITU_KEY}`
                        ],
                        tileSize: 256
                    }
                },
                layers: [
                    {
                        id: 'tdt-img-layer',
                        type: 'raster',
                        source: 'tdt-img',
                        minzoom: 0,
                        maxzoom: 18
                    }
                ]
            },
            center: [116.3956, 39.9152], // 北京
            zoom: 10
        });

        // 等待地图加载完成
        map.on('load', () => {
            // 模拟人口密度数据点
            const populationData = Array.from({ length: 50000 }, () => ({
                position: [
                    116.1 + Math.random() * 0.6, // 经度范围
                    39.7 + Math.random() * 0.6   // 纬度范围
                ],
                value: Math.random() * 100     // 随机值表示人口密度
            }));

            // 创建deck.gl图层
            // const { ScatterplotLayer } = deck;
            const layer = new deck.ScatterplotLayer({
                id: 'population-layer',
                data: populationData,
                pickable: true,
                opacity: 0.8,
                stroked: true,
                filled: true,
                radiusScale: 6,
                radiusMinPixels: 2,
                radiusMaxPixels: 15,
                lineWidthMinPixels: 1,
                getPosition: d => d.position,
                getRadius: d => d.value / 5,
                getFillColor: d => {
                    const value = d.value;
                    if (value > 70) return [255, 0, 0];    // 高: 红色
                    if (value > 30) return [255, 255, 0];  // 中: 黄色
                    return [0, 255, 0];                    // 低: 绿色
                },
                getLineColor: [0, 0, 0],
                onClick: info => {
                    if (info.object) {
                        new maplibregl.Popup()
                            .setLngLat(info.lngLat)
                            .setHTML(`人口密度: ${info.object.value.toFixed(1)}`)
                            .addTo(map);
                    }
                }
            });

            // 创建MapLibreLayer并添加到地图
            // const { MapLibreLayer } = deck;
            const deckLayer = new deck.MapboxOverlay({
                id: 'deck-layer',
                layers: [layer],
                map: map,
                pickingRadius: 5
            });


            // 添加导航控件
            map.addControl(deckLayer);
        });
    </script>
</body>

</html>